<template>
	<view class="logistics">
		<view class="logisticsinfo">
			<view class="logisticsinfo_pic"><image class="logisticsinfo_pic_image" :src="Url+'mine/discount/product01.png'" mode="widthFix"></image></view>
			<view class="logistics_content">
				<view class="logistics_company">
					物流公司：<text>百世快递</text>
				</view>
				<view class="logistics_company logistics_num">
					物流单号：246544461146 
					<view class="copy" @tap="tocopy">
						复制
					</view>
				</view>
				<view class="logistics_company ">
					物流电话：<text class="logistics_phone">69523</text>
				</view>
			</view>
		</view>
		<!-- 物流状态 -->
		<view class="logisticsstate">
			<view class="title">
				物流状态
			</view>
			<block v-for="(item, index) in tracesData" :key="index">
			  <trackNode :is-first="index===tracesData.length-1" :is-newest="index===0" :is-main-node="item.isMainNode" :node-data="item"></trackNode>
			</block>
		</view>
	</view>
</template>

<script>
	import trackNode from '@/components/logistics/logistics.vue'
	export default {
		components: {
		  trackNode
		},
		data () {
			return {
				Url:this.Imgurl,
				tracesData: [
				          {
				            acceptStation: '包裹已被吴亦发同学签收', // 节点描述
				            createTime: '2019-10-24 15: 27: 16',
				            status: 'COMPLETE', // 节点状态
				            phone: '', // 电话
				            statusName: '已签收', // 节点标题
				            isMainNode: true // 是否主节点，主节点前方展示icon
				          },
				          {
				            acceptStation: '由派送员蔡小坤同志配送，电话：',
				            createTime: '2019-10-24 15: 26: 41',
				            status: 'DELIVERING',
				            phone: '16677778888',
				            statusName: '运输中',
				            isMainNode: true
				          },
				          {
				            acceptStation: '已到XXX小区快递点',
				            createTime: '2019-10-24 15: 26: 41',
				            status: 'DELIVERING',
				            phone: '',
				            statusName: '运输中',
				            isMainNode: false
				          },
				          {
				            acceptStation: '已到海宁集散中心',
				            createTime: '2019-10-24 15: 26: 18',
				            status: 'DELIVERING',
				            phone: '',
				            statusName: '运输中',
				            isMainNode: false
				          },
				          {
				            acceptStation: '已到杭州集散中心',
				            createTime: '2019-10-24 15: 26: 07',
				            status: 'DELIVERING',
				            phone: '',
				            statusName: '运输中',
				            isMainNode: false
				          },
				          {
				            acceptStation: '包裹已到达余杭区集散中心',
				            createTime: '2019-10-24 15: 25: 54',
				            status: 'DELIVERING',
				            phone: '',
				            statusName: '运输中',
				            isMainNode: false
				          },
				          {
				            acceptStation: '快递员已上门取件',
				            createTime: '2019-10-24 15: 25: 17',
				            status: 'DELIVERING',
				            phone: '',
				            statusName: '已揽收',
				            isMainNode: false
				          },
				          {
				            acceptStation: '等待快递员上门揽件',
				            createTime: '2019-10-24 15: 25: 00',
				            status: 'WATTING_DELIVER',
				            phone: '',
				            statusName: '已发货',
				            isMainNode: true
				          },
				          {
				            acceptStation: '您的包裹正在打包',
				            createTime: '2019-10-24 15: 24: 00',
				            status: 'WATTING_DELIVER',
				            phone: '',
				            statusName: '待发货',
				            isMainNode: false
				          },
				          {
				            acceptStation: '订单支付成功，等待商家发货',
				            createTime: '2019-10-24 15: 22: 30',
				            status: 'PAYED',
				            statusName: '已支付',
				            isMainNode: true
				          },
				          {
				            acceptStation: '订单提交成功',
				            createTime: '2019-10-24 15: 22: 00',
				            status: 'WATTING_PAY',
				            statusName: '已下单',
				            isMainNode: true
				          }
				        ]
			}
		},
		methods: {
			tocopy () {
				uni.setClipboardData({
				    data: '126344544',
				    success: function () {
				        console.log('success');
				    }
				});
			}
		}
	}
</script>

<style lang="less" scoped>
.logistics {
	overflow: hidden;
}
.logisticsinfo {
	width: calc(100% - 30upx);
	height: 180upx;
	background-color: #ffffff;
	border-radius: 20upx;
	margin: 20upx auto;
	padding: 0 15upx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.logisticsinfo_pic {
	width: 120upx;
	height: 120upx;
	border-radius: 10upx;
	border: 2upx solid #e1e1e1;
	box-sizing: border-box;
	background-color: #f9e4e3;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10upx;
	.logisticsinfo_pic_image {
		width: 102upx;
	}
}
.logistics_content {
	height: 120upx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.logistics_company {
		font-size: 28upx;
		color: #333333;
		text {
			color: #f73e2f;
		}
		.logistics_phone {
			color: #09c1e2;
		}
	}
	.logistics_num {
		align-items: center;
		display: flex;
		.copy {
			width: 78upx;
			height: 36upx;
			border: 2upx solid #E1E1E1;
			border-radius: 4upx;
			text-align: center;
			line-height: 36upx;
			font-size: 28upx;
			color: #666;
			margin-left: 10upx;
		}
	}
}
.logisticsstate {
	width: calc(100% - 30upx);
	background-color: #ffffff;
	border-radius: 20upx;
	margin:auto;
	padding: 0 15upx;
	box-sizing: border-box;
	.title {
		width: 100%;
		height: 92upx;
		border-bottom: 2upx solid #E1E1E1;
		box-sizing: border-box;
		color: #333333;
		font-size: 32upx;
		font-weight: bold;
		line-height: 90upx;
	}
}
</style>
